<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tip Message demo</title>

<link rel="stylesheet" type="text/css" href="../theme-remote.css" />
<style type="text/css">
body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

#debugPanel pre {
    font-family: "Lucida Console", "Courier New", Courier, monospace;
}

div.container {
    border: 0px solid green;
    margin: 10px;
}
</style>

<script type="text/javascript">
var djConfig = {
    isDebug: true,
    parseOnLoad: true,
    locale: "zh",
    extraLocale: ["en"],
    baseUrl: "../lib/dojotoolkit/dojo/",
    modulePaths: {
        "demo": "../../../script/demo",
        "com": "../../../script/com"
    }
};
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojo/dojo.xd.js.uncompressed.js"></script>
<script type="text/javascript">
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojo.date.locale");
    dojo.require("dojo.parser");

    dojo.require("dijit.dijit"); // optimize: load dijit layer
    dojo.require("dijit.ColorPalette");
    dojo.require("dijit.Dialog");
    dojo.require("dijit.form.CheckBox");
    dojo.require("dijit.form.ComboBox");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.form.DateTextBox");
    dojo.require("dijit.form.DropDownButton");
    dojo.require("dijit.form.FilteringSelect");
    dojo.require("dijit.form.Form");
    dojo.require("dijit.form.NumberSpinner");
    dojo.require("dijit.form.NumberTextBox");
    dojo.require("dijit.form.RadioButton");
    dojo.require("dijit.form.SimpleTextarea");
    dojo.require("dijit.form.Textarea");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.form.ValidationTextBox");
    dojo.require("dijit.InlineEditBox");
    dojo.require("dijit.Menu");
    dojo.require("dijit.TitlePane");
    dojo.require("dijit.TooltipDialog");

    dojo.require("dojox.data.AndOrWriteStore");
    dojo.require("dojox.form.BusyButton");
    dojo.require("dojox.html.entities");
    dojo.require("dojox.layout.FloatingPane");
    dojo.require("dojox.layout.ResizeHandle");
    dojo.require("dojox.widget.Standby");
    dojo.require("dojox.widget.Toaster");
</script>
<script type="text/javascript" src="../script/utils.js"></script>
<script type="text/javascript">
function debug(messages) {
    var msg = demo.utils._getDebugMsg.apply(null, arguments);
    console.debug(msg);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML = msg;
}

function append(messages) {
    var msg = demo.utils._getDebugMsg.apply(null, arguments);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML += "\n" + msg;
}

function show(id) {
    demo.utils.show(id);
}

function hide(id) {
    demo.utils.hide(id);
}
</script>
<style type="text/css">
@import "../css/rounded-button.css";
@import "../css/rounded-corners.css";

body {
    padding: 10px;
}

.highlight {
    background-color: #FFBBBB !important;
}

/* Override Toaster text style */
.dijitToasterContainer {
    font-size: 1em;
}

#tipMessage {
    max-width: 50%;
    border-width: 1px;
    border-style: solid;
    padding: 2px 15px;
    background-repeat: no-repeat;
    background-position: 5px center;
    opacity: 0; /* initially hidden */
}

#tipMessage.message {
    border: none;
    /* background: url("../images/icons/icon-information-blue.gif");*/
    background-color: #FFF0A8;
}

#tipMessage.success {
    border-color: #4F8A10;
    padding-left: 25px;
    background-image: url("../images/icons/icon-system-status-ok.gif");
    background-color: #DFF2BF;
}

#tipMessage.warning {
    border-color: #9F6000;
    padding-left: 25px;
    background-image: url("../images/icons/icon-system-status-alert.gif");
    background-color: #FEEFB3;
}

#tipMessage.error {
    border-color: #D8000C;
    padding-left: 25px;
    background-image: url("../images/icons/icon-error.gif");
    background-color: #FFBABA;
}

/* Fix IE7 bug when font-size: small */
.dijitTooltipContainer {
   font-size: x-small;
}
</style>
<script type="text/javascript">
if (("demo" in dojo.global) === false) {
    var demo = {};
}

demo.bookmarks = [];
demo.tipMessage = null;
demo.bookmarkTableFormat = "basic";

//////////////////////////////
dojo.addOnLoad(function() {
    debug("loaded");

    demo.tipMessage = new dojo.fx.Toggler({
        node: "tipMessage"
    });
});

//////////////////////////////
function showToasterMessage(msg, type, duration) {
    var params = {};
    params.message = msg;
    params.type = type || null;
    params.duration = duration || null;

    dojo.publish("toasterMessageTopic", [params]);
}

function showTipMessage(msg, type, duration) {
    var def = new dojo.Deferred();

    var tipMessageNode = dojo.byId("tipMessage");
    dojo.removeClass(tipMessageNode);
    dojo.addClass(tipMessageNode, type || "message");
    dojo.byId("tipMessage").innerHTML = msg;

    var tipMessage = demo.tipMessage;
    tipMessage.show();

    var duration = duration || 0;
    if (duration > 0) {
        // callback when animation ends
        tipMessage.hideAnim.onEnd = function() {
            def.callback();
        };

        // hide after duration
        setTimeout(function() {
            tipMessage.hide();
        }, duration);
    } else {
        // never hide
        setTimeout(function() {
            def.callback();
        }, 10);
    }

    return def;
}

function hideTipMessage() {
    var def = new dojo.Deferred();

    var tipMessage = demo.tipMessage;

    // callback when animation ends
    tipMessage.hideAnim.onEnd = function() {
        def.callback();
    };

    tipMessage.hide();

    return def;
}
////////////////////////////////////////////////////////////
</script>
</head>
<body class="tundra">

  <div id="main" class="container">

    <div id="titlePanel" dojoType="dijit.TitlePane" title="Panel" style="">
      <div id="resizablePanel" style="position:relative; padding: 10px; border:1px solid black;">

        <!-- Content -->
        <div class="content">
          <div style="position: relative; padding: 5px; width: 50em; background-color: #EAF4FC;">

            <!-- Tip Message -->
            <div id="tipMessage" style="position:absolute;top:0;right:0;">this is the tip message</div>

            <!-- Instruction -->
            <h1>Tip Message</h1>

            <h3>Success:</h3>
            <p>showTipMessage("A post has been saved!", "success", 1000);</p>

            <h3>Error:</h3>
            <p>showTipMessage("An error occurs.", "error", 0);</p>

          </div>

        </div>

        <!-- Resize Handle -->
        <div id="resizeHandle" dojoType="dojox.layout.ResizeHandle" targetId="resizablePanel"></div>
      </div>
    </div>

    <!-- Button Panel -->
    <div dojoType="dojo.dnd.Moveable">
      <div id="buttonPanel" dojoType="dijit.TitlePane" title="Button Panel" style="">
        <!-- Button: hide message -->
        <button dojoType="dijit.form.Button" title="Click to hide tip message" onClick="hideTipMessage();">Hide tip message</button>

        <!-- Button: message tip -->
        <button dojoType="dijit.form.Button" title="Click to show message tip" onClick="showTipMessage('Information Messages', 'message', 3000);">Message tip</button>

        <!-- Button: success tip -->
        <button dojoType="dijit.form.Button" title="Click to show success tip" onClick="showTipMessage('Success Messages', 'success', 1000);">Success tip</button>

        <!-- Button: warning tip -->
        <button dojoType="dijit.form.Button" title="Click to show warning tip" onClick="showTipMessage('Warning Messages', 'warning', 0);">Warning tip</button>

        <!-- Button: error tip -->
        <button dojoType="dijit.form.Button" title="Click to show error tip" onClick="showTipMessage('Error Messages', 'error', 0);">Error tip</button>

        <br />

        <!-- Button: message toaster -->
        <button dojoType="dijit.form.Button" title="Click to show message toaster" onClick="showToasterMessage('Information Messages', 'messsage', 3000);">Message toaster</button>

        <!-- Button: warning toaster -->
        <button dojoType="dijit.form.Button" title="Click to show warning toaster" onClick="showToasterMessage('Warning Messages', 'warning', 0);">Warning toaster</button>

        <!-- Button: error toaster -->
        <button dojoType="dijit.form.Button" title="Click to show error toaster" onClick="showToasterMessage('Error Messages', 'error', 0);">Error toaster</button>

        <!-- Button: fatal toaster -->
        <button dojoType="dijit.form.Button" title="Click to show fatal toaster" onClick="showToasterMessage('Fatal Messages', 'fatal', 0);">Fatal toaster</button>

        <br />

        <!-- DropDown Button with TooltipDialog -->
        <button dojoType="dijit.form.DropDownButton" title="Click to show TooltipDialog">
          <span>DropDownButton with TooltipDialog</span>
          <!-- TooltipDialog -->
          <div dojoType="dijit.TooltipDialog">
            <label for="nameTextBox2">Name:</label> <input dojoType="dijit.form.TextBox" id="nameTextBox2" name="name" />
            <span id="saveButton2" dojoType="dijit.form.Button" type="submit" title="Save">Save
              <script type="dojo/method" event="onClick">
                var nameWidget = dijit.byId("nameTextBox2");
                var name = nameWidget.attr("value");
                debug("name:", name);
              </script>
            </span>
          </div>
        </button>

        <button dojoType="dijit.form.DropDownButton" title="Click to show Menu">
          <span>DropDownButton with Menu</span>
          <!-- Menu -->
          <div dojoType="dijit.Menu" id="menu" style="display: none;">
            <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut" onClick="alert('Cut!')">Cut</div>
            <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy" onClick="alert('Copy!')">Copy</div>
            <div dojoType="dijit.MenuSeparator"></div>
            <div dojoType="dijit.PopupMenuItem">
              <span>Popup ColorPalette</span>
              <div dojoType="dijit.ColorPalette"></div>
            </div>
          </div>
        </button>
      </div>
    </div>
  </div>

  <!-- Debug Panel -->
  <div id="debugPanel" dojoType="dojox.layout.FloatingPane" title="Console" resizable="true" dockable="true" style="position: absolute; bottom: 20px; right: 20px; width: 500px; height: 150px;">
    <pre id="debugPanelContent"></pre>
  </div>

  <div id="instruction_1" dojoType="dojox.layout.FloatingPane" title="Help" resizable="true" dockable="true" style="position: absolute; top: 20px; right: 20px; width: 300px;">
    see dijit/form/Button.js line 67:
    <pre>
_onButtonClick: function(/*Event*/ e){
    // summary:
    //        Handler when the user activates the button portion.
    if(this._onClick(e) === false){ // returning nothing is same as true
        e.preventDefault(); // needed for checkbox
    }else if(this.type == "submit" && !this.focusNode.form){ // see if a nonform widget needs to be signalled
        for(var node=this.domNode; node.parentNode/*#5935*/; node=node.parentNode){
            var widget=dijit.byNode(node);
            if(widget && typeof widget._onSubmit == "function"){
                widget._onSubmit(e);
                break;
            }
        }
    }
},
    </pre>
  </div>

  <!-- Toaster -->
  <div dojoType="dojox.widget.Toaster" id="toaster" positionDirection="br-up" messageTopic="toasterMessageTopic"></div>
</body>
</html>
